import { Form, Input, Radio, Select, Spin } from 'antd';
import React from 'react';
import { useRequest } from '@umijs/hooks';
import { findDepartmentDropdownBox } from '../../service';

export default function Step1({ data = {}, isEdit = false, form, formLayout }) {
  const { getFieldDecorator, getFieldValue } = form;
  const { data: deptOptions = [], loading } = useRequest(() =>
    findDepartmentDropdownBox(isEdit ? { roleId: data.id } : {}),
  );
  return (
    <section>
      <Form.Item {...formLayout} label="名称">
        {getFieldDecorator('name', {
          initialValue: data.name,
          rules: [{ required: true, message: '请输入角色名称' }],
        })(<Input size="large" maxLength={20} placeholder="请输入角色名称" allowClear />)}
      </Form.Item>
      <Form.Item {...formLayout} label="状态">
        {getFieldDecorator('status', {
          initialValue: data.status || '1',
          rules: [{ required: true, message: '请选择角色名称' }],
        })(
          <Radio.Group>
            <Radio value="1">启用</Radio>
            <Radio value="0">禁用</Radio>
          </Radio.Group>,
        )}
      </Form.Item>
      <Form.Item {...formLayout} label="描述">
        {getFieldDecorator('description', {
          initialValue: data.description,
          rules: [{ message: '请输入角色描述' }],
        })(<Input size="large" maxLength={100} placeholder="请输入角色描述" allowClear />)}
      </Form.Item>
      <Form.Item {...formLayout} label="类型">
        {getFieldDecorator('competence', {
          initialValue: data.competence || '1',
          rules: [{ required: true, message: '请选择角色类型' }],
        })(
          <Radio.Group>
            <Radio value="1">普通</Radio>
            <Radio value="0">管理员</Radio>
          </Radio.Group>,
        )}
      </Form.Item>
      {getFieldValue('competence') === '0' && (
        <Spin spinning={loading} style={{ minHeight: 30 }}>
          <Form.Item {...formLayout} label="管辖部门">
            {getFieldDecorator('departmentId', {
              initialValue: data.departmentId,
              rules: [{ required: true, message: '请选择部门' }],
            })(
              <Select placeholder={deptOptions.length > 0 ? '请选择部门' : '无下级可选部门'}>
                {deptOptions.map(item => (
                  <Select.Option key={item.id} value={item.id}>
                    {item.name}
                  </Select.Option>
                ))}
              </Select>,
            )}
          </Form.Item>
        </Spin>
      )}
    </section>
  );
}
